import React, { Component } from 'react';
import '../css/container.scss';

//子组件-标题组件
function Title(props) {
      return (
            <div className="content-title">{props.title}</div>
      );
}

//父组件-顶部栏
function Topbar(props) {
      return (
            <div className="topbar">
                  <Title title={props.title}></Title>
                  <div className="close-page">
                        <button onClick={handleClickDelete}></button>
                  </div>
            </div>
      );
}

let handleClickDelete = () => {
      window.history.go(-1);
}

//祖父组件 数据传递方向为：祖父组件=》父组件=》子组件
class Container extends Component {

      componentDidMount() {
            //让canvas在屏幕上上下左右居中
            let contentContainer = document.querySelector('.content-container');
            let windowHeight = document.documentElement.scrollHeight;
            contentContainer.style.height = windowHeight * 0.1 + 'rem';
      }

      render() {
            return (
                  <div className="content-container">
                        <div className="flex-container">
                              <div className="center-container">
                                    <Topbar title={this.props.title}></Topbar>
                                    {this.props.children}
                              </div>
                        </div>
                  </div>
            )
      }
}

export default Container;
